// 主题颜色
:root { --theme-color: #0669e3; }
:root.black-blue, :root.white-blue { --theme-color: #0669e3; }
:root.black-green, :root.white-green { --theme-color: #41b584; }
:root.black-purple, :root.white-purple { --theme-color: #6954f0; }

// 黑色风格
:root,
:root.black-blue,
:root.black-green,
:root.black-purple {
    --wa-header-bg-color: #ffffff;
    --wa-header-text-color: #333333;
    --wa-header-border-color: #ebeef5;

    --wa-tags-bg-color: #ffffff;
    --wa-tags-text-color: #666666;
    --wa-tags-border-color: #d8dce5;
    --wa-tags-active-bg-color: var(--theme-color);
    --wa-tags-active-text-color: #ffffff;
    --wa-tags-close-hover-bg-color: #ff4d1f;
    --wa-tags-close-hover-text-color: #ffffff;
    --wa-tags-nimble-after-color: var(--theme-color);
    --wa-tags-nimble-active-bg-color: var(--el-color-primary-light-9);
    --wa-tags-nimble-active-text-color: var(--theme-color);

    --wa-menu-bg-color: #282C34;
    --wa-menu-text-color: #ffffffb3;
    --wa-menu-border-color: unset;
    --wa-menu-hover-bg-color: unset;
    --wa-menu-hover-text-color: #ffffff;
    --wa-menu-active-text-color: #ffffff;
    --wa-menu-active-bg-color: var(--theme-color);

    --wa-menu-col-m-bg-color: #282c34;
    --wa-menu-col-m-text-color: #ffffffb3;
    --wa-menu-col-m-active-bg-color: var(--theme-color);
    --wa-menu-col-m-active-text-color: #ffffff;
    --wa-menu-col-m-hover-bg-color: unset;
    --wa-menu-col-m-hover-text-color: #ffffff;
    --wa-menu-col-s-bg-color: #ffffff;
    --wa-menu-col-s-text-color: #515a6e;
    --wa-menu-col-s-active-text-color: var(--theme-color);
    --wa-menu-col-s-active-bg-color: var(--el-color-primary-light-9);
    --wa-menu-col-s-hover-text-color: var(--theme-color);
    --wa-menu-col-s-hover-bg-color: unset;

    --wa-menu-regular-m-bg-color: #191a23;
    --wa-menu-regular-m-text-color: #ffffffb3;
    --wa-menu-regular-m-active-bg-color: unset;
    --wa-menu-regular-m-active-text-color: #ffffff;
    --wa-menu-regular-m-active-br-color: #ffffff;
    --wa-menu-regular-m-hover-bg-color: unset;
    --wa-menu-regular-m-hover-text-color: #ffffff;
    --wa-menu-regular-s-bg-color: #ffffff;
    --wa-menu-regular-s-text-color: #515a6e;
    --wa-menu-regular-s-active-text-color: var(--theme-color);
    --wa-menu-regular-s-active-bg-color: var(--el-color-primary-light-9);
    --wa-menu-regular-s-hover-text-color: var(--theme-color);
    --wa-menu-regular-s-hover-bg-color: unset;

    --wa-menu-roomier-bg-color: #282C34;
    --wa-menu-roomier-text-color: #ffffffb3;
    --wa-menu-roomier-active-bg-color: unset;
    --wa-menu-roomier-active-text-color: #ffffff;
    --wa-menu-roomier-hover-bg-color: unset;
    --wa-menu-roomier-hover-text-color: #ffffff;
}

// 白色风格
:root.white-blue,
:root.white-green,
:root.white-purple {
    --wa-menu-bg-color: #ffffff;
    --wa-menu-text-color: #515a6e;
    --wa-menu-border-color: #EBEEF5;
    --wa-menu-hover-bg-color: unset;
    --wa-menu-hover-text-color: var(--theme-color);
    --wa-menu-active-text-color: var(--theme-color);
    --wa-menu-active-bg-color: var(--el-color-primary-light-9);

    --wa-menu-col-m-bg-color: #ffffff;
    --wa-menu-col-m-text-color: #515a6e;
    --wa-menu-col-m-active-bg-color: var(--theme-color);
    --wa-menu-col-m-active-text-color: #ffffff;
    --wa-menu-col-m-hover-bg-color: unset;
    --wa-menu-col-m-hover-text-color: var(--theme-color);
    --wa-menu-col-s-active-text-color: var(--theme-color);
    --wa-menu-col-s-active-bg-color: var(--el-color-primary-light-9);
    --wa-menu-col-s-hover-text-color: #515a6e;
    --wa-menu-col-s-hover-bg-color: #0000000f;

    --wa-menu-regular-m-bg-color: var(--theme-color);
    --wa-menu-regular-m-text-color: rgb(255 255 255 / 70%);
    --wa-menu-regular-m-active-br-color: #ffffff;
    --wa-menu-regular-m-hover-bg-color: unset;
    --wa-menu-regular-m-hover-text-color: #ffffff;
    --wa-menu-regular-s-bg-color: #ffffff;
    --wa-menu-regular-s-text-color: #515a6e;
    --wa-menu-regular-s-active-text-color: var(--theme-color);
    --wa-menu-regular-s-active-bg-color: var(--el-color-primary-light-9);
    --wa-menu-regular-s-hover-text-color: var(--theme-color);
    --wa-menu-regular-s-hover-bg-color: unset;

    --wa-menu-roomier-bg-color: #ffffff;
    --wa-menu-roomier-text-color: #515a6e;
    --wa-menu-roomier-active-bg-color: unset;
    --wa-menu-roomier-active-text-color: var(--theme-color);
    --wa-menu-roomier-hover-bg-color: unset;
    --wa-menu-roomier-hover-text-color: var(--theme-color);
}

// 暗黑
:root.dark {
    /* Layout */
    color-scheme: dark;
    --wa-menu-text-color: #ffffffb3;
    --wa-menu-hover-text-color: #ffffff;
    --wa-menu-bg-color: var(--el-bg-color);
    --wa-menu-border-color: var(--el-border-color-light);
    --wa-menu-col-m-bg-color: #1d2124;
    --wa-menu-col-m-text-color: #ffffffb3;
    --wa-menu-col-s-text-color: #ffffffb3;
    --wa-menu-col-s-bg-color: #1d2124;
    --wa-menu-col-s-hover-text-color: #ffffff;
    --wa-menu-regular-m-bg-color: #1d2124;
    --wa-menu-regular-s-bg-color: #1d2124;
    --wa-menu-regular-s-text-color: #ffffffb3;
    --wa-menu-roomier-bg-color: #1d2124;
    --wa-menu-roomier-text-color: #ffffffb3;
    --wa-header-bg-color: var(--el-bg-color);
    --wa-header-border-color: var(--el-border-color-light);
    --wa-tags-bg-color: var(--el-bg-color);
    --wa-tags-text-color: var(--el-text-color-regular);
    --wa-tags-border-color: var(--el-border-color);
    --wa-tags-nimble-active-bg-color: var(--el-color-primary-light-9);

    /* element */
    --table-header-bg-color: var(--el-bg-color);
    --table-header-text-color: var(--el-text-color-regular);
    --el-bg-color: #1d2124;
    --el-bg-color-page: #0a0a0a;
    --el-bg-color-light: #333333;
    --el-bg-color-lighter: #252525;
    --el-bg-color-overlay: #1d1e1f;
    --el-text-color-primary: #e5eaf3;
    --el-text-color-regular: #cfd3dc;
    --el-text-color-secondary: #a3a6ad;
    --el-text-color-placeholder: #8d9095;
    --el-text-color-disabled: #6c6e72;
    --el-border-color: #4c4d4f;
    --el-border-color-darker: #636466;
    --el-border-color-dark: #58585b;
    --el-border-color-light: #414243;
    --el-border-color-lighter: #363637;
    --el-border-color-extra-light: #2b2b2c;
    --el-fill-color-darker: #424243;
    --el-fill-color-dark: #39393a;
    --el-fill-color: #303030;
    --el-fill-color-light: #262727;
    --el-fill-color-lighter: #1d1d1d;
    --el-fill-color-extra-light: #191919;
    --el-fill-color-blank: var(--el-bg-color);
    --el-mask-color: rgb(0 0 0 / 80%);
    --el-mask-color-extra-light: rgb(0 0 0 / 30%);
    --el-box-shadow-light: 0px 0px 12px rgb(0 0 0 / 72%);
    --el-box-shadow-lighter: 0px 0px 6px rgb(0 0 0 / 72%);
    --el-box-shadow: 0px 12px 32px 4px rgb(0 0 0 / 36%), 0px 8px 20px rgb(0 0 0 / 72%);
    --el-box-shadow-dark: 0px 16px 48px 16px rgb(0 0 0 / 72%), 0px 12px 32px #000000, 0px 8px 16px -8px #000000 !important;

    /* wangeditor */
    --w-e-textarea-bg-color: var(--el-bg-color);
    --w-e-textarea-color: var(--el-text-color-primary);
    --w-e-textarea-border-color: var(--el-border-color);
    --w-e-textarea-slight-border-color: var(--el-border-color-light);
    --w-e-textarea-slight-color: var(--el-border-color);
    --w-e-textarea-slight-bg-color: var(--el-bg-color-page);
    --w-e-toolbar-color: var(--el-text-color-primary);
    --w-e-toolbar-bg-color: var(--el-bg-color);
    --w-e-toolbar-active-color: var(--el-text-color-primary);
    --w-e-toolbar-active-bg-color: var(--el-bg-color);
    --w-e-toolbar-disabled-color: var(--el-text-color-disabled);
    --w-e-toolbar-border-color: var(--el-border-color);
    --w-e-modal-button-bg-color: var(--el-bg-color);
    --w-e-modal-button-border-color: var(--el-border-color);
}
